Browser history manipulation হল ওয়েব পেজের URL এবং ব্রাউজারের ইতিহাস (history) পরিবর্তন করার একটি পদ্ধতি, যার মাধ্যমে ওয়েব অ্যাপ্লিকেশনগুলি ইউজার নেভিগেশন এবং অ্যাপ্লিকেশন স্টেট (state) ট্র্যাক করতে পারে। JavaScript এর মাধ্যমে ব্রাউজার ইতিহাসে পরিবর্তন করা যায়, যা প্রায়ই এক পৃষ্ঠার অ্যাপ্লিকেশন (SPA) বা রিয়েল-টাইম অ্যাপ্লিকেশনের জন্য ব্যবহার করা হয়।
History API:
HTML5 এর একটি গুরুত্বপূর্ণ ফিচার হলো History API, যা ব্রাউজারের ইতিহাস পরিচালনা করতে সহায়ক। এটি history.pushState(), history.replaceState(), এবং window.onpopstate ইভেন্টের মতো মেথডের মাধ্যমে ইতিহাস পরিবর্তন করতে দেয়।
১. pushState() মেথড
এই মেথডের মাধ্যমে আপনি URL-এর অংশ পরিবর্তন করতে পারেন, এবং নতুন এন্ট্রি ব্রাউজারের ইতিহাসে যোগ করতে পারেন। এটি ইউজারের নেভিগেশনকে প্রভাবিত না করেই URL পরিবর্তন করতে সক্ষম।
Syntax:
history.pushState(stateObject, title, url);
stateObject: এটি একটি অবজেক্ট যা বর্তমান স্টেট সম্পর্কে তথ্য ধারণ করে।title: এই ফিল্ডটি প্রায়শই আধুনিক ব্রাউজারে অবহেলিত থাকে এবং সাধারণতnullবা একটি শিরোনাম ব্যবহার করা হয়।url: এটি নতুন URL যা ব্রাউজারের ঠিকানাতে প্রদর্শিত হবে। এটি একই ডোমেইনে থাকতে হবে।
উদাহরণ:
// history.pushState() ব্যবহার করে URL পরিবর্তন
function changeURL() {
const state = { page: "page2" };
history.pushState(state, "Page 2", "/page2");
}
এই কোডটি ব্রাউজারের URL পরিবর্তন করবে, কিন্তু পেজ রিলোড হবে না।
২. replaceState() মেথড
এই মেথডটি pushState() এর মতোই, তবে এটি ব্রাউজারের ইতিহাসে নতুন এন্ট্রি যোগ করার পরিবর্তে বর্তমান এন্ট্রিটি প্রতিস্থাপন করে।
Syntax:
history.replaceState(stateObject, title, url);
- এটি
pushState()এর মতোই কাজ করে, তবে এতে নতুন ইতিহাস এন্ট্রি তৈরি না হয়ে শুধুমাত্র বর্তমান এন্ট্রি আপডেট হয়।
উদাহরণ:
// history.replaceState() ব্যবহার করে URL পরিবর্তন
function replaceURL() {
const state = { page: "page3" };
history.replaceState(state, "Page 3", "/page3");
}
এখানে, URL পরিবর্তিত হবে, কিন্তু ব্রাউজারের ইতিহাসে নতুন একটি এন্ট্রি যুক্ত হবে না।
৩. onpopstate ইভেন্ট
যখন ইউজার ব্রাউজারের back বা forward বাটন ক্লিক করে, তখন popstate ইভেন্ট ট্রিগার হয়। এই ইভেন্টটি স্টেট অবজেক্টের পরিবর্তন ট্র্যাক করতে ব্যবহৃত হয়।
Syntax:
window.onpopstate = function(event) {
console.log("State changed:", event.state);
};
- এই ইভেন্টে
stateপ্রপার্টি থাকে, যাpushState()বাreplaceState()এর মাধ্যমে সেট করা স্টেট অবজেক্ট ধারণ করে।
উদাহরণ:
// popstate ইভেন্টের মাধ্যমে স্টেট ট্র্যাক করা
window.onpopstate = function(event) {
if (event.state) {
console.log("Current page is: " + event.state.page);
}
};
এই কোডটি ব্রাউজারের ইতিহাস পরিবর্তিত হলে এটি লগ করবে যে ইউজার কোন পেজে আছেন।
৪. উদাহরণ: এক পৃষ্ঠার অ্যাপ্লিকেশন (SPA) তৈরি
একটি সহজ এক পৃষ্ঠার অ্যাপ্লিকেশন তৈরি করা যেটি URL পরিবর্তন করে ব্রাউজারের ইতিহাস ট্র্যাক করে।
HTML:
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>SPA Example</title>
</head>
<body>
<h1>SPA Example</h1>
<button onclick="goToPage('home')">হোম</button>
<button onclick="goToPage('about')">আমাদের সম্পর্কে</button>
<button onclick="goToPage('contact')">যোগাযোগ</button>
<div id="content"></div>
<script src="script.js"></script>
</body>
</html>
JavaScript (script.js):
function goToPage(page) {
const content = document.getElementById('content');
// URL পরিবর্তন করা
history.pushState({ page: page }, page, `/${page}`);
// পেজ কনটেন্ট পরিবর্তন করা
switch(page) {
case 'home':
content.innerHTML = "<h2>হোম পেজ</h2><p>এটি হোম পেজ।</p>";
break;
case 'about':
content.innerHTML = "<h2>আমাদের সম্পর্কে</h2><p>এটি আমাদের সম্পর্কে পেজ।</p>";
break;
case 'contact':
content.innerHTML = "<h2>যোগাযোগ</h2><p>এটি যোগাযোগ পেজ।</p>";
break;
default:
content.innerHTML = "<h2>404</h2><p>পেজ পাওয়া যায়নি।</p>";
break;
}
}
// ব্রাউজার ইতিহাসে পরিবর্তন ঘটলে পেজ কনটেন্ট আপডেট করা
window.onpopstate = function(event) {
if (event.state) {
goToPage(event.state.page);
}
};
// প্রথম পেজ লোডে হোম পেজ দেখানো
if (window.location.pathname === "/") {
goToPage("home");
}
এখানে, pushState ব্যবহার করে URL পরিবর্তন করা হচ্ছে এবং প্রতিটি পেজের জন্য কনটেন্ট পরিবর্তন করা হচ্ছে। onpopstate ইভেন্টের মাধ্যমে আমরা ইউজারের নেভিগেশন ট্র্যাক করছি, এবং তাদের পছন্দমত পেজ দেখাচ্ছি।
Browser History Manipulation এর সুবিধা ও ব্যবহার:
- এক পৃষ্ঠার অ্যাপ্লিকেশন (SPA): History API ব্যবহারের মাধ্যমে অ্যাপ্লিকেশন URL পরিবর্তন করতে পারে এবং পুনরায় লোড না করে কনটেন্ট আপডেট করতে পারে।
- টেবলেট বা মোবাইল ডিভাইস: ব্রাউজারের back ও forward বাটন ব্যবহার করে ইউজার নেভিগেশন কার্যকরী করা।
- প্রবাহ পরিচালনা: Dynamic URL পরিবর্তনের মাধ্যমে ডাইনামিক কনটেন্ট প্রদর্শন, যেমন ফিল্টার, পেজিনেশন ইত্যাদি।
- বুকমার্কিং: নির্দিষ্ট স্টেট এবং পেজের জন্য ব্রাউজারে URL তৈরি করা যা পরে আবার অ্যাক্সেস করা যায়।
Browser history manipulation HTML5 এর History API ব্যবহার করে ওয়েব অ্যাপ্লিকেশনগুলিকে ইউজারের নেভিগেশন প্রক্রিয়া এবং URL পরিবর্তন সহজভাবে পরিচালনা করতে সাহায্য করে। pushState() এবং replaceState() মেথড ব্যবহার করে ব্রাউজারের ইতিহাস পরিচালনা করা সম্ভব, এবং popstate ইভেন্টের মাধ্যমে ইউজারের নেভিগেশন ট্র্যাক করা যায়। এটি বিশেষত এক পৃষ্ঠার অ্যাপ্লিকেশন (SPA) তৈরিতে খুবই উপকারী।
সারাংশ:
- History API এর মাধ্যমে URL পরিবর্তন এবং ব্রাউজারের ইতিহাস পরিচালনা করা সম্ভব।
pushState()এবংreplaceState()এর মাধ্যমে URL পরিবর্তন করা যায়।popstateইভেন্ট ব্যবহার করে ইতিহাস ট্র্যাক করা যায়।- SPA অ্যাপ্লিকেশন এবং নেভিগেশন পরিচালনায় History API একটি গুরুত্বপূর্ণ টুল।
Read more
